<template>
	<!-- 砍价 -->
	<view class="bargain">
		<view class="topBox">
			<view class="left">
				<view class="image">
					特价
				</view>
				<view class="title">
					团购
				</view>
				<view class="verticalLine">
					|
				</view>
				<view class="subheading">
					已有<text>{{data.total}}</text>人参与拼团
				</view>
			</view>
			<view class="right"  @click="$goURl('/pages/commodity/bargaining/groupBuying')">
				更多 >
			</view>
		</view>
		<swiper style="height: 60px;margin-top: 20upx;"  next-margin="calc(50%)"  :indicator-dots="false" :circular="true" :interval="3000"
			:duration="1000">
			<swiper-item  v-for="item in data.list" :key="item.ID" @click="$goURl('/pages/commodity/bargaining/groupBulist?id='+item.ID)">
					<view class="bargainItem">

						<view class="goods">
							<view class="img">
								<image :src="item.img" mode=""></image>
							</view>
							<view class="detail">
								<view class="name textsl1">
									{{item.name}}
								</view>
								<view class="price">
									￥<text>{{item.price}}</text>起
									<view class="">
										{{item.market}}
									</view>
								</view>
							</view>
						</view>

					</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script setup>  
import { ref, watch, computed, reactive, onMounted ,getCurrentInstance} from 'vue';  
const {proxy} = getCurrentInstance();
  
const props = defineProps({  
  type: {  
    type: Number,  
    default: 1, // 0: 一排3个, 1: 一排4个, 2: 一排5个  
  },  
  list: {  
    type: Array,  
    default: () => []  
  }  
});  
const data=reactive({
	total:0,
	list:[]
})
onMounted(()=>{
	bargainingSuccessList()
})
	function bargainingSuccessList(){
		proxy.$request({
			url:`api/teamwork/teamworkSuccessful/?page=1&size=10`,
			method:'GET',
			success:(res)=>{
				data.total=res.data.length
				// data.list=res.data.data
			}
		})
		proxy.$request({
			url: `api/teamwork/goods_list_all/0/?page=1&size=10`,
			method: 'get',
			success(res) {
				data.list=res.data.data
			}
		})
	}
</script>


<style lang="scss" scoped>
	// 砍价
	.bargain{
		background-color: #fff;
		margin: 30upx;
		padding: 30upx;
		box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.08);
		border-radius: 13px 13px 13px 13px;
		.topBox{
			display: flex;
			justify-content: space-between;
			align-items: center;
			.left{
				display: flex;
				align-items: center;
				.image{
					width: 37px;
						height: 19px;
					border-radius:10px 10px 10px 0px ;
					background-color: #FF0034;
					text-align: center;
					z-index: 999;
					color: #FFFFFF;
				}
				.title{
					font-weight: bold;
					font-size: 16px;
					color: #000000;
					line-height: 0px;
					text-align: left;
					font-style: normal;
					text-transform: none;
					margin: 0 10upx;
				}
				.verticalLine{
					color: #909090;
					margin-right: 10upx;
				}
				.subheading{
					font-weight: 500;
					font-size: 12px;
					color: #909090;
					line-height: 0px;
					text-align: left;
					font-style: normal;
					text-transform: none;
					text{
						color: #FF620C;
					}
				}
			}
			.right{
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 12px;
				color: #909090;
				line-height: 0px;
				text-align: left;
				font-style: normal;
				text-transform: none;
			}
		}
		.bargainItem{
				position: relative;
				background: linear-gradient( 180deg, rgba(255,255,255,0) 0%, #FFFFFF 100%);
			.rtImg{
					width: 37px;
					height: 19px;
				border-radius:10px 10px 10px 0px ;
				background-color: #FF0034;
				text-align: center;
				z-index: 999;
				color: #FFFFFF;
			}
			.goods{
				display: flex;
				justify-content: space-between;
				.img{
					width: 69px;
					height: 52px;
					background: #FFFFFF;
					border-radius: 7px 7px 7px 7px;
					image{
						width: 69px;
						height: 52px;
						border-radius: 7px 7px 7px 7px;
					}
				}
				.detail{
					width: calc(100% - 79px);
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					.name{
						font-family: PingFang SC, PingFang SC;
						font-weight: bold;
						font-size: 13px;
						color: #000000;
						text-align: left;
					}
					.price{
						font-family: PingFang SC, PingFang SC;
						font-weight: bold;
						font-size: 10px;
						color: #FF0034;
						text-align: left;
						font-style: normal;
						text-transform: none;
						text{
							font-size: 14px;
						}
					}
				}
			}
			.subheading{
				margin-left: 20upx;
				font-weight: 500;
				font-size: 11px;
				color: #000000;
				text-align: left;
				font-style: normal;
				text-transform: none;
				text{
					color: #FF620C;
				}
			}
			.jingdutiaobox{
				width: calc(100% - 40upx);
				margin-left: 20upx;
				margin-top: 20upx;
				height: 6px;
				background: #E4E6E7;
				border-radius: 3px 3px 3px 3px;
			}
			.jingdutiao{
				width: 100%;
				height: 6px;
				background: linear-gradient( 90deg, #FE2624 0%, #FFBB00 100%);
				border-radius: 3px 3px 3px 3px;
			}
		}
	}
</style>